<template>
  <el-dialog
    :title="title"
    :visible.sync="show"
    width="800px"
    center
    append-to-body
  >
    <uploader v-model="fileList" :disabled="disabled" :can-download="canDownload" @download="download" @preview="preview" />
    <span slot="footer" class="dialog-footer">
      <el-button @click="show = false">取 消</el-button>
      <el-button type="primary" @click="show = false">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import uploader from '../Uploader'
export default {
  name: 'FileUploader',
  components: {
    uploader
  },
  model: {
    prop: 'fileList',
    event: 'change'
  },
  props: {
    title: {
      type: String,
      default: '附件'
    },
    showModal: {
      type: Boolean,
      default: false
    },
    fileList: {
      type: Array,
      default() {
        return []
      }
    },
    canDownload: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    show: {
      get() {
        return this.showModal
      },
      set(val) {
        this.$emit('update:showModal', val)
      }
    }
  },
  watch: {
    fileList: {
      handler(val) {
        this.$emit('change', val)
      }
    }
  },
  methods: {
    download(data) {
      this.$emit('download', data)
    },
    preview(data) {
      this.$emit('preview', data)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
